<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>无忧微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>
	<style>
		.m-passport .close-icon {
			display: inline-block;
		}
	</style>

	<body>
		<div class="m-passport">
			<h3 class="title-1 f-pr">
				<span>注册</span>
				<span class="f-pa" @tap="back()">
					<i class="icon-angle-left f-fl"></i>
					<small>返回</small>
				</span>
			</h3>
			<div class="logo"><img src="../images/logo.png"></div>
			<div class="info-box">
				<p>已向手机号{{mobile}}发送短信验证码</p>
				<ul>
					<li>
						<i class="icon code-icon"></i>
						<input type="text" class="border" placeholder="请输入短信验证码" v-model="code">
						<i class="time-icon f-pa" id="seconds">15s</i>
						<i v-if="code" class="close-icon f-pa" @tap="empty_1()"></i>
					</li>
					<li>
						<i class="icon password-icon"></i>
						<input type="password" :class="{border: border}" ref="login_password" placeholder="请输入登录密码" v-model="password">
						<i :class="[{see: see}, 'unsee-icon f-pa']" @tap="changeAttr()"></i>
						<i v-if="password" class="close-icon close-1 f-pa" @tap="empty_2()"></i>
					</li>
					<li :class="{hide: hide_2}">
						<i class="icon invited-icon"></i>
						<input type="text" placeholder="邀请码(若无请忽略)" v-model="referrer">
						<i v-if="referrer" class="close-icon f-pa" @tap="empty_3()"></i>
					</li>
				</ul>
				<p :class="[{hide: hide_1}, 'recommend']" @tap="recommend()"><i class="icon-triangle-right"></i><span>推荐人手机号码（选填）</span></p>
				<p class="check">
					<i class="check-icon"></i>
					<span>同意<span id="service" @tap="service()">《无忧微贷服务协议》</span></span>
				</p>
			</div>
			<a v-if="password" class="btn active" @tap="register()">注册</a>
			<a v-else class="btn" @tap="register()">注册</a>
		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<script type="text/javascript">
			mui.plusReady(function() {
				var vm = new Vue({
					el: '.m-passport',
					data: {
						mobile: plus.webview.currentWebview().mobile,
						code: '',
						password: '',
						referrer: '',
						see: false,
						hide_1: false,
						hide_2: true,
						border: false
					},

					created: function() {
						mui.ajax(base + 'passport/regiestercode', {
							data: {
								'mobile': plus.webview.currentWebview().mobile
							},
							dataType: 'json',
							type: 'post',
							headers: sign(md5),
							success: function(data) {
								console.log('regiester code:' + JSON.stringify(data))
								if(data.result) {
									vm.countdowncode(data.wait_second);
								} else {
									mui.toast(data.message);
								}
							},
							error: function(data) {
								console.error(data.message);
							}
						});
					},

					methods: {
						back: function() {
							mui.back();
						},

						empty_1: function() {
							this.code = '';
						},

						empty_2: function() {
							this.password = '';
						},

						empty_3: function() {
							this.referrer = '';
						},

						recommend: function() {
							this.hide_1 = true;
							this.hide_2 = false;
							this.border = true;
						},

						changeAttr: function() {
							var obj = this.$refs.login_password;
							if(!this.see) {
								this.see = true;
								obj.setAttribute('type', 'text');
							} else {
								this.see = false;
								obj.setAttribute('type', 'password');
							}
						},

						service: function() {
							mui.openWindow({
								url: 'service.html',
								show: {
									aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
								}
							});
						},

						countdowncode: function(wait) {
							var $obj = $('#seconds');
							if(wait === 0) {
								$obj.css('display','none');
							} else {
								$obj.text(wait + 's');
								wait--;
								setTimeout(function() {
									vm.countdowncode(wait);
								}, 1000);
							}
						},

						validate: function() {
							var code = this.code,
								password = this.password;
							if(code == '' || code == undefined) {
								mui.toast('请输入验证码');
								return false;
							}

							if(password == '') {
								mui.toast('请输入登录密码');
								return false;
							}
							if(password.length < 6 || password.length > 16) {
								mui.toast('密码长度必须为6~16位字符');
								return false;
							}
							return true;
						},

						register: function() {
							document.activeElement.blur();
							if(!this.validate()) {
								return false;
							} else {
								mui.ajax(base + 'passport/register', {
									type: 'post',
									data: {
										'mobile': this.mobile,
										'code': this.code,
										'password': this.password,
										'referrer': this.referrer
									},
									dataType: 'json',
									headers: sign(md5),
									success: function(data) {
										if(data.result) {
											plus.storage.setItem('user_id', data.id + '');
											plus.webview.getWebviewById('html/account.html').evalJS("init();");
											plus.webview.getWebviewById('passport.html').close();
											plus.webview.currentWebview().close();
										}
										mui.toast(data.message);
									},
									error: function(data) {
										console.error(data.message);
									}
								});
							}
						}
					}
				});

				//回车事件
				window.addEventListener('keyup', function(event) {
					if(event.keyCode == 13) {
						return vm.register();
					}
				}, false);
			});
		</script>
	</body>

</html>